<template>
	<div class="node-item-container">
		<el-checkbox v-if="isEditing && canEdit(node)" :checked="checked" @change="onCheck"></el-checkbox>
		<span v-else-if="!isEditing && node.needRerecord" class="fix">补录</span>
		<span v-else class="dot" />

		<div class="node-wrapper">
			<p>
				<span class="label">节点ID：</span>
				<span class="value">{{ node.modId.split('_')[1] }}</span>
				<span class="short-label">节点名称：</span>
				<span class="value">{{ node.modName || '--' }}</span>
				<span class="short-label">模板名称：</span>
				<span class="value">{{ node.modTitle }}</span>
			</p>
			<p>
				<span class="label">开始时间：</span>
				<span class="value">{{ node.startedAt }}</span>
				<span class="short-label">结束时间：</span>
				<span class="value">{{ node.closedAt }}</span>
				<span class="short-label">运行时间：</span>
				<span class="value">{{ node.duration }}</span>
			</p>

			<!-- 1. 信息确认 messageSure 模板结果 肯定/否定/其他/不回答|嗯啊模糊回答|没听清请重复 | AI播报话术内容 | 访客回答 -->
			<div v-if="node.modId.includes('messageSure')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{
						isYes(node.result)
							? '肯定'
							: node.result == 'no'
							? '否定'
							: node.result == 'other'
							? '其他'
							: node.result == 'fuzzy'
							? '嗯啊模糊回答'
							: node.result == 'repeat'
							? '没听清请重复'
							: '不回答'
					}}</span>
				</p>
				<p>
					<span class="label">AI播报话术内容：</span>
					<span class="long-value">{{ getRequest(node) }}</span>
				</p>
				<p>
					<span class="label">访客回答：</span>
					<span class="long-value">{{ getAnswer(node) }}</span>
				</p>
			</div>
			<!-- 2. 业务导航 ivvr 模板结果 命中意图分支/未命中意图分支 | 命中意图点 | 命中意图点内容 | AI播报话术内容 | 访客回答 -->
			<div v-if="node.modId.includes('ivvr')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '命中意图分支' : '未命中意图分支' }}</span>
				</p>
				<p>
					<span class="label">命中意图点ID：</span>
					<span class="value">{{ isYes(node.result) ? node.data.answer.key : '--' }}</span>
				</p>
				<p>
					<span class="label">命中意图点内容：</span>
					<span class="long-value">{{ isYes(node.result) ? node.data.answer.name : '--' }}</span>
				</p>
				<p>
					<span class="label">AI播报话术内容：</span>
					<span class="long-value">{{ getRequest(node) }}</span>
				</p>
				<p>
					<span class="label">访客回答：</span>
					<span class="long-value">{{ getAnswer(node) }}</span>
				</p>
			</div>
			<!-- 3. 播报模板 speakWaiting 模板结果 成功 | AI播报话术内容 -->
			<div v-if="node.modId.includes('speakWait')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '成功' : '' }}</span>
				</p>
				<p>
					<span class="label">AI播报话术内容：</span>
					<span class="long-value">{{ getRequest(node) }}</span>
				</p>
			</div>
			<!-- 4. 信息记录 messageCollect 收集结果数据类型 “文本/字符串” / “数值” | 模板结果 有结果/没结果 | AI播报话术内容 | 访客回答 -->
			<div v-if="node.modId.includes('messageCollect')">
				<p>
					<span class="label">收集结果数据类型：</span>
					<span class="value">{{ node.data.typeOfCollectedResults == 'text' ? '文字串' : node.data.typeOfCollectedResults == 'numeric' ? '数值' : '数字串' }}</span>
				</p>
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '有结果' : '没结果' }}</span>
				</p>
				<p>
					<span class="label">AI播报话术内容：</span>
					<span class="long-value">{{ getRequest(node) }}</span>
				</p>
				<p>
					<span class="label">访客回答：</span>
					<span class="long-value">{{ getAnswer(node) }}</span>
				</p>
			</div>
			<!-- 5. 合同签署 signContract 模板结果 成功 | 推送的文件名 | 推送文件的URL链接 -->
			<div v-if="node.modId.includes('signContract')">
				<p>
					<span class="label">收集结果数据类型：</span>
					<span class="value">{{ isYes(node.result) ? '成功' : '失败' }}</span>
				</p>
				<p>
					<span class="label">推送的文件名：</span>
					<span class="long-value">{{ node.data.request.data.name }}</span>
				</p>
				<p>
					<span class="label">推送文件的URL链接：</span>
					<a v-if="node.data.request.data.url" class="url-value" v-html="node.data.request.data.url" :href="getUrl(node.data.request.data.url)" target="_blank"> </a>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
			</div>
			<!-- 6. 活体检测 detectLivingFace 模板结果 通过/不通过 | 识别图片的URL链接 -->
			<div v-if="node.modId.includes('detectLivingFace')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '通过' : '不通过' }}</span>
				</p>
				<p>
					<span class="label">识别图片的URL链接：</span>
					<a v-if="node.data.answer.url" class="url-value" v-html="node.data.answer.url" :href="getUrl(node.data.answer.url)" target="_blank"> </a>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
			</div>
			<!-- 7. 人脸比对 faceCompare 模板结果 通过/不通过/检测不到人脸 | 识别图片的URL链接 | AI播报话术内容 -->
			<div v-if="node.modId.includes('faceCompare')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '通过' : node.result === 'no' ? '不通过' : '检测不到人脸' }}</span>
				</p>
				<p>
					<span class="label">识别图片的URL链接：</span>
					<a v-if="node.data.answer.url" class="url-value" v-html="node.data.answer.url" :href="getUrl(node.data.answer.url)" target="_blank"> </a>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
				<p>
					<span class="label">AI播报话术内容：</span>
					<span class="long-value">{{ node.data.request }}</span>
				</p>
			</div>
			<!-- 8. 业务指令-截图 sendMessage 模板结果 成功 | 截图文件名 | 截图文件的URL链接 -->
			<div v-if="node.modId.includes('sendMessage') && node.data.request.data.cmd == 'screen-snapshot'">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '成功' : '' }}</span>
				</p>
				<p>
					<span class="label">截图文件名：</span>
					<span class="long-value">{{ node.data.answer.name }}</span>
				</p>
				<p>
					<span class="label">截图文件的URL链接：</span>
					<a v-if="node.data.answer.url" class="url-value" v-html="node.data.answer.url" :href="getUrl(node.data.answer.url)" target="_blank"> </a>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
			</div>
			<!-- 9. 业务指令-推送签名 sendMessage 模板结果 成功 | 签名文件名 | 签名文件的URL链接 -->
			<div v-if="node.modId.includes('sendSign')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '成功' : node.result === 'other' ? '超时未提交' : '提交失败' }}</span>
				</p>
				<p>
					<span class="label">签名文件名：</span>
					<span class="long-value">{{ node.data.answer.name || '--' }}</span>
				</p>
				<p>
					<span class="label">签名文件的URL链接：</span>
					<a v-if="node.data.answer.url" class="url-value" v-html="node.data.answer.url" :href="getUrl(node.data.answer.url)" target="_blank"> </a>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
			</div>
			<!-- 10 内容推送-推送视频 sendContents | sendVideoNode 模板结果 成功 | 上传视频名 | 上传视频的URL链接 -->
			<div v-if="node.modId.includes('sendContents') && node.data.data.type === 'link' && node.data.data.data.type === 'video'">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '成功' : '失败' }}</span>
				</p>
				<p>
					<span class="label">上传视频名：</span>
					<span class="long-value">{{ node.data.request.data.name || '--' }}</span>
				</p>
				<p>
					<span class="label">上传视频的URL链接：</span>
					<a v-if="node.data.request.data.url" class="url-value" v-html="node.data.request.data.url" :href="getUrl(node.data.request.data.url)" target="_blank"> </a>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
			</div>
			<!-- 11. 内容推送-推送网页 sendContents | sendLinkNode 模板结果 成功 | 推送网页地址 -->
			<div v-if="node.modId.includes('sendContents') && node.data.data.type === 'link' && node.data.data.data.type === 'page'">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '成功' : '失败' }}</span>
				</p>
				<p>
					<span class="label">推送网页地址：</span>
					<a v-if="node.data.request.data.url" class="url-value" v-html="node.data.request.data.url" :href="getUrl(node.data.request.data.url)" target="_blank"> </a>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
			</div>
			<!-- 12. 内容推送-推送富文本 sendContents | sendRichTextNode 模板结果 | 推送富文本内容 -->
			<div v-if="node.modId.includes('sendContents') && node.data.data.type === 'richtext'">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '成功' : '失败' }}</span>
				</p>
				<p>
					<span class="label">推送富文本内容：</span>
					<span v-if="node.data.request && node.data.request.data && node.data.request.data.content" class="button" @click="viewDoc(node)">查看</span>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
			</div>
			<!-- 12. 内容推送-PDF sendContents |  模板结果 | 推送PDF： -->
			<div v-if="node.modId.includes('sendContents') && node.data.data.type === 'link' && node.data.data.data.type === 'paper'">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '成功' : '失败' }}</span>
				</p>
				<p>
					<span class="label">上传PDF名：</span>
					<span class="long-value">{{ node.data.request.data.name || '--' }}</span>
				</p>
				<p>
					<span class="label">上传PDF的URL链接：</span>
					<a v-if="node.data.request.data.url" class="url-value" v-html="node.data.request.data.url" :href="getUrl(node.data.request.data.url)" target="_blank"> </a>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
			</div>
			<!-- 13. 获取位置 requestLocation 模板结果 获取成功/获取失败/获取超时 | AI播报话术内容 | 地理位置信息 -->
			<div v-if="node.modId.includes('requestLocation')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '获取成功' : node.result == 'no' ? '获取失败' : '获取超时' }}</span>
				</p>
				<p>
					<span class="label">AI播报话术内容：</span>
					<span class="long-value">{{ node.data.request }}</span>
				</p>
				<p>
					<span class="label">地理位置信息：</span>
					<span class="long-value">{{ node.data.answer.address || '--' }}</span>
				</p>
			</div>
			<!-- 14. 推送扫描 scanCode 模板结果 扫码成功/扫码失败/扫码超时 | AI播报话术内容 | 扫描内容 -->
			<div v-if="node.modId.includes('scanCode')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '扫码成功' : node.result == 'no' ? '扫码失败' : '扫码超时' }}</span>
				</p>
				<p>
					<span class="label">AI播报话术内容：</span>
					<span class="long-value">{{ node.data.request }}</span>
				</p>
				<p>
					<span class="label">扫描内容：</span>
					<span class="long-value">{{ node.data.answer.data.code || '--' }}</span>
				</p>
			</div>
			<!-- 15. 表单填写 sendForm 模板结果 提交成功/提交失败/超时未提交 | AI播报话术内容 | 表单内容 -->
			<div v-if="node.modId.includes('sendForm')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '提交成功' : node.result == 'no' ? '提交失败' : '超时未提交' }}</span>
				</p>
				<p>
					<span class="label">AI播报话术内容：</span>
					<span class="long-value">{{ getRequest(node) }}</span>
				</p>
				<p>
					<span class="label">表单内容：</span>
					<template v-if="isYes(node.result) && node.data.answer && node.data.answer.length > 0">
						<span class="button" style="margin-right: 10px" @click="viewForm(node, index)" v-for="(item, index) in node.data.answer" :key="index">{{ `查看 ${index + 1}` }}</span>
					</template>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
			</div>
			<!-- 16. 人证对比 idCardCompare 模板结果 通过/不通过 | 识别图片的URL链接 | AI播报话术内容 -->
			<div v-if="node.modId.includes('idCardCompare')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '通过' : node.result === 'no' ? '不通过' : '检测不到人脸' }}</span>
				</p>
				<p>
					<span class="label">识别图片的URL链接：</span>
					<a v-if="node.data.answer.url" class="url-value" v-html="node.data.answer.url" :href="getUrl(node.data.answer.url)" target="_blank"> </a>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
				<p>
					<span class="label">AI播报话术内容：</span>
					<span class="long-value">{{ getRequest(node) }}</span>
				</p>
			</div>
			<!-- 17. 静默等待 silentWating 模板结果 成功-->
			<div v-if="node.modId.includes('silentWating')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ '成功' }}</span>
				</p>
			</div>
			<!-- 18. 选项判断 optionJudge 模板结果 命中选项/未命中选项 | 命中选项内容 -->
			<div v-if="node.modId.includes('optionJudge')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '命中选项' : '未命中选项' }}</span>
				</p>
				<p>
					<span class="label">命中选项内容：</span>
					<span class="long-value">{{ getAnswer(node) }}</span>
				</p>
			</div>
			<!-- 19. 收音模板 soundReception 收集结果数据类型 “文本/字符串” / “数值” | 模板结果 | 访客回答 -->
			<div v-if="node.modId.includes('soundReception')">
				<p>
					<span class="label">收集结果数据类型：</span>
					<span class="value">{{ node.data.typeOfCollectedResults === 'numeric' ? '数值' : node.data.typeOfCollectedResults === 'text' ? '文字串' : '数字串' }}</span>
				</p>
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '有结果' : '无结果' }}</span>
				</p>
				<p>
					<span class="label">访客回答：</span>
					<span class="long-value">{{ getAnswer(node) }}</span>
				</p>
			</div>
			<!-- 20. NLP对接 nlp 模板结果 命中NLP标识/未命中NLP标识 | NLP标识 | 访客回答 -->
			<div v-if="node.modId.includes('third-nlp') || node.modId.includes('nlp')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '命中NLP标识' : '未命中NLP标识' }}</span>
				</p>
				<p>
					<span class="label">NLP标识：</span>
					<span class="long-value">{{ node.data.answer.key || '--' }}</span>
				</p>
				<p>
					<span class="label">访客回答：</span>
					<span class="long-value">{{ node.data.answer.listenindSpeech || '--' }}</span>
				</p>
			</div>
			<!-- 21. 变量判断 variableJudge 模板结果 命中判断分支/未命中判断分支 | 命中分支详情 -->
			<div v-if="node.modId.includes('variableJudge')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '命中判断分支' : '未命中判断分支' }}</span>
				</p>
				<p>
					<span class="label">命中分支详情：</span>
					<span class="long-value">{{ getAnswer(node) }}</span>
				</p>
			</div>
			<!-- 25. 信息汇总 messageSummary 发起信息汇总：汇总流程内最终经历分支并选择的模块的<模板名称 节点ID> 变量名<变量值> -->
			<div v-if="node.modId.includes('messageSummary')">
				<p>
					<span class="label">发起信息汇总：</span>
					<span class="long-value">{{ getSummary(node) }}</span>
				</p>
			</div>
			<!-- 22. hangup: '结束模版' -->
			<!-- 23. transfer: '转人工模板' -->
			<!-- 24. sceneTransfer: '场景转接' -->
			<div v-if="node.modId.includes('sceneTransfer')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '成功' : '失败' }}</span>
				</p>
				<p>
					<span class="label">业务场景名称：</span>
					<span class="long-value">{{ getBizSceneName(node) }}</span>
				</p>
			</div>
			<!-- 26. 证言抄录 sendDeposition 模板结果  提交成功/提交失败/超时未提交 | 抄录证言 | 抄录结果URL链接 -->
			<div v-if="node.modId.includes('sendDeposition')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '提交成功' : node.result === 'no' ? '提交失败' : '超时未提交' }}</span>
				</p>
				<p>
					<span class="label">抄录证言</span>
					<span v-if="isYes(node.result) && node.data.answer.text" class="long-value">{{ node.data.answer.text }}</span>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
				<p>
					<span class="label">抄录结果URL链接</span>
					<a v-if="isYes(node.result) && node.data.answer.data" class="url-value" v-html="node.data.answer.data" :href="getUrl(node.data.answer.data)" target="_blank"> </a>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
			</div>
			<!-- 27. 收集变量 collect-variable 模板结果  提交成功/提交失败/超时未提交 | 收集变量 <变量名>:<变量结果> <变量名>：- -->
			<div v-if="node.modId.includes('variableCollection')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '提交成功' : node.result === 'no' ? '提交失败' : '超时未提交' }}</span>
				</p>
				<p>
					<span class="label">AI播报话术内容：</span>
					<span class="long-value">{{ getRequest(node) }}</span>
				</p>
				<p>
					<span class="label">收集变量</span>
					<span class="long-value">{{ getVariables(node) }}</span>
				</p>
			</div>
			<!-- 短视频采集 collectShortVideo 模版结果 提交成功/提交失败/超时未提交 AI播报话术内容 短视频URL链接-->
			<div v-if="node.modId.includes('collectShortVideo')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '提交成功' : node.result === 'no' ? '提交失败' : '超时未提交' }}</span>
				</p>
				<p>
					<span class="label">AI播报话术内容：</span>
					<span class="long-value">{{ getRequest(node) }}</span>
				</p>
				<p>
					<span class="label">短视频URL链接：</span>
					<a v-if="isYes(node.result) && node.data.answer.url" class="url-value" v-html="node.data.answer.url" :href="getUrl(node.data.answer.url)" target="_blank"> </a>
					<span v-else class="long-value">{{ '--' }}</span>
				</p>
			</div>
			<!-- 邀请人工三方 inviteHumanThreeParties 邀请工号 被邀请人加入会话后的通话模式 被邀请人加入会话后麦克风状态 模版结果 邀请成功/邀请超时/邀请被拒/邀请发送失败-->
			<div v-if="node.modId.includes('inviteHumanThreeParties')">
				<p>
					<span class="label">邀请工号：</span>
					<span class="long-value">{{ getInviteData(node, 'agentName') }}</span>
				</p>
				<p>
					<span class="long-label">被邀请人加入会话后的通话模式：</span>
					<span class="label">{{ getInviteData(node, 'inviteMediaType') }}</span>
				</p>
				<p>
					<span class="long-label">被邀请人加入会话后麦克风状态：</span>
					<span class="label">{{ getInviteData(node, 'microphoneStatus') }}</span>
				</p>
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '邀请成功' : node.result === 'timeout' ? '邀请超时' : node.result === 'reject' ? '邀请被拒' : '邀请发送失败' }}</span>
				</p>
			</div>
			<!-- 接口调用 => 成功 || 失败 -->
			<div v-if="node.modId.includes('interfaceCall')">
				<p>
					<span class="label">模板结果：</span>
					<span class="value">{{ isYes(node.result) ? '调用成功' : '调用失败' }}</span>
				</p>
			</div>
			<!-- 卡证采集双路记录 -->
			<div v-if="node.modId.includes('cardCollection')">
				<CardCollectionRecord :record="node" />
			</div>
		</div>
		<RichText
			v-if="showRichText"
			:dialogVisible="showRichText"
			:richText="richText"
			@close="
				() => {
					showRichText = false;
				}
			"
		/>
		<ViewFormDeatil
			v-if="showForm"
			:dialogVisible="showForm"
			:formId="formId"
			:detailId="detailId"
			@close="
				() => {
					showForm = false;
				}
			"
		/>
	</div>
</template>

<script>
import RichText from './RichText.vue';
import ViewFormDeatil from './ViewFormDeatil.vue';
import CardCollectionRecord from '@/views/components/CardCollectionRecord/index.vue';
import { appendToken } from '@/utils/tool';
export default {
	components: { RichText, ViewFormDeatil, CardCollectionRecord },
	props: {
		node: {
			type: Object,
			default: () => {}
		},
		index: {
			type: Number,
			default: 0
		},
		isEditing: {
			type: Boolean,
			default: false
		},
		checked: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			// 富文本
			showRichText: false,
			richText: '',
			// 表单
			showForm: false,
			formId: '',
			detailId: ''
		};
	},
	mounted() {},

	methods: {
		canEdit(node) {
			// 必选节点 ： 结束节点、转人工节点、场景转接节点、变量判断节点不可进行勾选（选择补录节点时不展示复选框）
			const nodes = ['variableJudge', 'hangup', 'transfer', 'sceneTransfer'];
			return !nodes.includes(node.modId.split('_')[0]);
		},
		getRequest(node) {
			if (!node || !node.data || !node.data.request) {
				return '--';
			}
			const { request } = node.data;
			if (typeof request === 'string' && node.data.request.length > 0) {
				return request;
			} else if (typeof request === 'object' && request.request && request.request.length > 0) {
				return request.request;
			}
			return '--';
		},
		getAnswer(node) {
			if (!node || !node.data || !node.data.answer) {
				return '--';
			}
			const { answer } = node.data;
			if (typeof answer === 'string' && answer.length > 0) {
				return answer;
			} else if (typeof answer === 'number') {
				return answer;
			} else if (typeof answer === 'object' && (answer.answer || answer.listenindSpeech)) {
				return answer.answer || answer.listenindSpeech;
			}

			return '--';
		},
		getSummary(node) {
			if (!node || !node.data || !node.data.answer || node.data.answer.length <= 0) {
				return '--';
			}
			const { answer, notifyExternal, params } = node.data;
			let result = '';
			// <模板名称 节点ID> 变量名<变量值> 推送地址：https://www.baidu.com
			answer.map((item, index) => {
				const { id, name } = item;
				const idx = id.split('_')[1];
				result += index === 0 ? `${name} ${idx}` : `、${name} ${idx}`;
				// if (type === 'messageCollect') {
				// 	result += `、${details.request}<${details.answer.answer}>`;
				// }
			});
			if (params) {
				for (const key in params) {
					result += `、${key}：<${params[key] || ' -- '}>`;
				}
			}
			if (notifyExternal && notifyExternal.url) {
				result += `、推送地址： ${notifyExternal.url}`;
			}

			return result;
		},
		viewDoc(node) {
			if (!node || !node.data || !node.data.request || !node.data.request.data || !node.data.request.data.content) {
				this.$message.warning('文档地址为空');
				return;
			}
			this.richText = node.data.request.data.content;
			this.showRichText = true;
		},
		viewForm(node, index) {
			if (!node || !node.data || !node.data.answer || node.data.answer.length <= 0) {
				this.$message.warning('表单ID为空');
				return;
			}
			this.formId = node.data.answer[index].formId;
			this.detailId = node.data.answer[index].detailId;
			this.showForm = true;
		},
		onCheck() {
			this.$emit('onCheck', this.index - 1);
		},
		getUrl(url) {
			if (url) {
				return appendToken(url.replace('http://', 'https://'));
			}
			return url;
		},
		isYes(result) {
			return ['yes', 'ok'].includes(result);
		},

		getCardType(node) {
			if (!node || !node.data || !node.data.answer || node.data.answer.length <= 0) {
				return '--';
			}
			let result = '--';
			const { cardType = '' } = node.data;
			result = cardType === 'ID-card' ? '身份证' : cardType === 'bank-card' ? '银行卡' : '--';
			return result;
		},

		getVariables(node) {
			if (!node || !node.data || !node.data.answer || node.data.answer.length <= 0) {
				return '--';
			}
			let result = '';
			const { answer } = node.data;

			if (answer && answer.data) {
				answer.data.map(item => {
					// <变量名>:<变量结果>
					result += `、${item.name}：<${item.value || ' -- '}>`;
				});
				result = result.replace('、', '');
			}

			return result;
		},
		getInviteData(node, key) {
			if (!node || !node.data || !node.data.request || !node.data.request.data || !node.data.request.data.data) {
				return '--';
			}
			const { inviteMediaType, agentName, microphoneStatus } = node.data.request.data.data;
			// {"inviteMediaType": "video","agentName": null,"microphoneStatus": "unmute"}
			const ReceiveMediaType = { video: '视频', audio: '语音' };
			const MicrophoneStatus = { unmute: '开麦', mute: '静音' };
			if (key === 'inviteMediaType') {
				return ReceiveMediaType[inviteMediaType];
			}
			if (key === 'microphoneStatus') {
				return MicrophoneStatus[microphoneStatus];
			}
			return agentName || '--';
		},
		getBizSceneName(node) {
			if (!node || !node.data || !node.data.answer) {
				return '--';
			}
			return node.data.answer.bizSceneName;
		}
	}
};
</script>

<style lang="less" scoped>
.node-item-container {
	display: flex;
	.dot {
		width: 12px;
		height: 12px;
		background: #eef0f3;
		border-radius: 50%;
		display: inline-block;
		position: relative;
		left: -27px;
		top: 0;
	}
	.fix {
		display: inline-block;
		width: 31px;
		height: 18px;
		background: #ffffff;
		border: 1px solid #ef5753;
		border-radius: 4px;
		font-size: 12px;
		color: #ef5753;
		line-height: 16px;
		position: relative;
		left: -36px;
		top: 0;
		text-align: center;
		margin-right: -19px;
	}
	.el-checkbox {
		width: 12px;
		height: 10px;
		position: relative;
		left: -27px;
		top: 0;
		margin-right: 2px;
	}

	.node-wrapper {
		width: 100%;
		height: max-content;
		background: #f8f9fb;
		margin-bottom: 20px;
		padding: 10px 20px;
		p {
			line-height: 28px;
		}
		span {
			display: inline-block;
		}
		.label {
			width: 150px;
		}
		.short-label {
			width: 80px;
		}
		.value {
			width: 200px;
		}
		.long-value {
			width: calc(100% - 160px);
			word-break: break-all;
		}
		.button {
			font-size: 12px;
			font-weight: 400;
			color: #6384fe;
			line-height: 24px;
			cursor: pointer;
		}
		.long-label {
			width: 230px;
		}
	}
}
</style>
